<template>
  <div class="playerBox">
    <!-- tab切换 -->
    <!-- 测点信息  相关视频 -->
      <span @click="selectTab(1)" :class="active == 1 ? 'active' : ''">传感器信息</span>
      <span @click="selectTab(2)" :class="active == 2 ? 'active' : ''">相关视频</span>
    
    <div class="playerBox-main" v-if="active == 2">
      <img class="videoList" src="../../../assets/healthMonitorAssets/img/bg_carLoadDetail.png" alt />
    </div>
    

    <CommonPointCard v-if="active == 1"></CommonPointCard>
  </div>
</template>

<script>
import CommonPointCard from "./CommonPointCard";
export default {
  data() {
    return {
      settings: {
        maxScrollbarLength: 30,
        wheelSpeed: 1,
        swipeEasing: true,
      },
      active:1
    };
  },
  props: {},
  mounted() {},
  methods: {
    selectTab(i){
      console.log(i)
        this.active = i
    }
  },
  components: {
    CommonPointCard
  },
};
</script>

<style lang="scss" scoped>
.playerBox {
  width: 100%;
  height: 100%;
  // background: rgba(243, 244, 247, 1);
  border-radius: 6px;
  // border: 1px solid rgba(238, 238, 242, 1);
  padding: 6px 6px 0 6px;
  &-main {
    width: 100%;
    height: calc(100% - 42px);
    border: 1px solid #000;
    img {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
  }
  &-btnGroup {
    padding-top: 6px;
    /deep/.el-button + .el-button {
      margin-left: 3px;
    }
    // /deep/.el-select-dropdown .el-scrollbar {
    //   overflow-y: hidden;
    //   overflow-x: scroll;
    // }
  }
  &-switch {
    background: #327bdc;
    height: 30px;
    text-align: center;
    padding: 0 10px;
    line-height: 30px;
    color: #fff;
  }
  &-btn {
    border: 1px solid #327bdc;
    background: rgba(243, 244, 247, 1);
    width: 30px;
    height: 30px;
    color: #327bdc;
    text-align: center;
    font-size: 22px;
    padding: 0;
    line-height: 30px;
  }
  &-label {
    font-size: 12px;
    font-weight: 400;
    color: rgba(50, 123, 220, 1);
  }
}
.active{
  background: #327BDC !important;
  color: #FFF !important;
}

  span{
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #9EC0EE;
    border-radius: 30px;
    margin-right: 10px;
    text-align: center;
    color: #9EC0EE;
    cursor: pointer;
  }
  .playerBox-main{
    margin-top: 10px;
  }

</style>
